<template>
  <globle-dialog
    ref="globleDialogRef"
    :title="globleDialogConfig.title"
    @onClickConfirmBtn="onConfirm"
    @onClickCancelBtn="onCancel"
    @onDialogOpen="onDialogOpen"
    @onDialogColsed="onDialogColsed"
  >
    <globle-form ref="globleFormRef" :bindData="globleFormConfig.bindData" :itemConfig="globleFormConfig.itemConfig"></globle-form>
  </globle-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { APIData, IStuWork } from '../../../type';
import { formType, IGlobleFormProps } from '../../../components/form/type';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { ElMessage } from 'element-plus';

const api = useAPI();
const store = useUserStore();
const globleDialogRef = ref();
const globleFormRef = ref();
const errorNecessaryMsg = '这是必填项';
const isDisabled = ref<boolean>();

const validateStuId = (rule: any, value: string, callback: any) => {
  // if (value === '') {
  //   callback(new Error(errorNecessaryMsg));
  // }else
  if (value.length < 4) {
    callback(new Error('长度不小于4位且必须以STU开头'));
  } else if (value.substring(0, 3) !== 'STU') {
    callback(new Error('必须以STU开头'));
  } else {
    callback();
  }
};

const globleDialogConfig = { title: '就业信息' };
const globleFormConfig: IGlobleFormProps = reactive({
  bindData: {} as IStuWork,
  itemConfig: [
    {
      type: formType.input,
      label: '学 号',
      prop: 'studentId',
      placeholder: '请输入',
      disabled: isDisabled.value,
      isShow: true,
      rules: [
        { required: true, message: errorNecessaryMsg, trigger: 'blur' },
        { validator: validateStuId, trigger: 'blur' },
      ],
    },
    {
      type: formType.input,
      label: '姓 名',
      prop: 'stuName',
      placeholder: '请输入',
      disabled: isDisabled.value,
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'blur' }],
    },
    {
      type: formType.select,
      label: '部 门',
      prop: 'department',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'change' }],
      options: [
        { label: '1部', value: 1 },
        { label: '2部', value: 2 },
        { label: '3部', value: 3 },
        { label: '4部', value: 4 },
      ],
    },
    {
      type: formType.select,
      label: '是否工作',
      prop: 'isWorked',
      isShow: true,
      rules: [{ required: true, message: errorNecessaryMsg, trigger: 'change' }],
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
    {
      type: formType.input,
      label: '公司名称',
      prop: 'companyName',
      placeholder: '请输入',
      isShow: true,
      rules: [],
    },
    {
      type: formType.input,
      label: '岗 位',
      prop: 'workType',
      placeholder: '请输入',
      isShow: true,
      rules: [],
    },
    {
      type: formType.input,
      label: '工作城市',
      prop: 'workCity',
      placeholder: '请输入',
      isShow: true,
      rules: [],
    },
  ],
});

const openDialogByEdit = (row: IStuWork) => {
  isDisabled.value = true;
  globleDialogRef.value.isShowDialog = true;
  globleFormConfig.bindData = JSON.parse(JSON.stringify(row));
};

const openDialogByAdd = () => {
  isDisabled.value = false;
  globleDialogRef.value.isShowDialog = true;
};

const emit = defineEmits(['onReGetData']);
//点击确定
const onConfirm = () => {
  const formEl = globleFormRef.value.formRef;
  formEl.validate((valid: boolean) => {
    // ElMessage.success(String(valid));
    if (valid)
      save().then(code => {
        if (code === 200) {
          emit('onReGetData');
          globleDialogRef.value.isShowDialog = false;
        }
      });
    else return false;
  });
};

//点击取消
const onCancel = () => {
  ElMessage.success('您取消了操作');
  globleDialogRef.value.isShowDialog = false;
};

//监听弹窗开启
const onDialogOpen = () => {
  const formEl = globleFormRef.value.formRef;
  formEl.clearValidate();
};

//监听弹窗关闭
const onDialogColsed = () => {
  const formEl = globleFormRef.value.formRef;
  globleFormConfig.bindData = {};
  formEl.clearValidate();
};

const save = async () => {
  const res: APIData = await api.save(globleFormConfig.bindData, store.role, 'stuWork');
  if (res.code === 200) {
    ElMessage.success(res.message);
  } else {
    ElMessage.error(res.message);
    return;
  }
  return res.code;
};

defineExpose({ openDialogByEdit, openDialogByAdd });
</script>

<style scoped></style>
